<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Slider.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Slider.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Slider.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;영역내의&nbsp;값을&nbsp;마우스&nbsp;클릭&nbsp;또는&nbsp;드래그로&nbsp;선택하는&nbsp;슬라이더&nbsp;컴포넌트
	@author&nbsp;hooriza,&nbsp;modified&nbsp;by&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	영역내의&nbsp;값을&nbsp;마우스&nbsp;클릭&nbsp;또는&nbsp;드래그로&nbsp;선택하는&nbsp;슬라이더&nbsp;컴포넌트
	
	@class&nbsp;jindo.Slider
	@extends&nbsp;jindo.UIComponent
	@uses&nbsp;jindo.DragArea
	
	@keyword&nbsp;slider,&nbsp;thumb,&nbsp;track,&nbsp;슬라이더
**/
jindo.Slider&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.Slider.prototype&nbsp;*/
	_elTrack&nbsp;:&nbsp;null,
	_aThumbs&nbsp;:&nbsp;null,
	_aPoses&nbsp;:&nbsp;null,
	_htSwap&nbsp;:&nbsp;null,
	
	/**
		Slider&nbsp;컴포넌트를&nbsp;생성한다.
		@constructor
		@param&nbsp;{String&nbsp;|&nbsp;HTMLElement}&nbsp;el&nbsp;Thumb이&nbsp;움직이는&nbsp;바탕이&nbsp;되는&nbsp;Track&nbsp;Element&nbsp;(id&nbsp;혹은&nbsp;엘리먼트&nbsp;자체)
		@param&nbsp;{Object}&nbsp;[oOptions]&nbsp;옵션&nbsp;객체
			@param&nbsp;{String}&nbsp;[oOptions.sClassPrefix=&quot;slider-&quot;]&nbsp;클래스명&nbsp;접두어
			@param&nbsp;{Boolean}&nbsp;[oOptions.bVertical=false]&nbsp;슬라이더&nbsp;세로&nbsp;여부
			@param&nbsp;{Boolean}&nbsp;[oOptions.bJump=true]&nbsp;슬라이더의&nbsp;트랙&nbsp;클릭시&nbsp;thumb&nbsp;객체의&nbsp;이동&nbsp;여부
			@param&nbsp;{Boolean}&nbsp;[oOptions.bDragOnTrack=true]&nbsp;트랙에&nbsp;마우스다운이후&nbsp;드래그가능한지&nbsp;여부
			@param&nbsp;{String}&nbsp;[oOptions.sClassPrefix=&quot;slider-&quot;]&nbsp;슬라이더를&nbsp;구현할&nbsp;객체의&nbsp;클래스명&nbsp;접두어
			@param&nbsp;{Number}&nbsp;[oOptions.nMinValue=0]&nbsp;슬라이더의&nbsp;최소값
			@param&nbsp;{Number}&nbsp;[oOptions.nMaxValue=0]&nbsp;슬라이더의&nbsp;최대값
			@param&nbsp;{Function}&nbsp;[oOptions.fAdjustValue=null]&nbsp;슬라이더의&nbsp;값을&nbsp;원하는&nbsp;값으로&nbsp;조절하는&nbsp;함수
			@param&nbsp;{Boolean}&nbsp;[oOptions.bActivateOnload=true]&nbsp;컴포넌트&nbsp;로드시&nbsp;activate&nbsp;여부
		@example
			var&nbsp;oSlider&nbsp;=&nbsp;new&nbsp;jindo.Slider(jindo.$(&#39;sample&#39;),&nbsp;{
				fAdjustValue&nbsp;:&nbsp;function(nValue)&nbsp;{
					//&nbsp;value의&nbsp;소숫점을&nbsp;제거한다.
					return&nbsp;Math.round(nValue&nbsp;/&nbsp;10)&nbsp;*&nbsp;10;
				}});
				
			alert(&quot;value&nbsp;:&nbsp;&quot;&nbsp;+&nbsp;oSlider.values());&nbsp;//&nbsp;소숫점이&nbsp;제거된&nbsp;value&nbsp;노출.
		@example
			var&nbsp;alpha&nbsp;=&nbsp;new&nbsp;jindo.Slider(jindo.$(&#39;alpha&#39;),{
				&nbsp;sClassPrefix&nbsp;:&nbsp;&#39;slider-&#39;,
				&nbsp;bVertical&nbsp;:&nbsp;false,&nbsp;//슬라이더&nbsp;세로&nbsp;여부
				&nbsp;bJump&nbsp;:&nbsp;true,&nbsp;//트랙에&nbsp;클릭하여&nbsp;이동가능한지&nbsp;여부
				&nbsp;bDragOnTrack&nbsp;:&nbsp;true,&nbsp;//트랙에&nbsp;마우스다운이후&nbsp;드래그가능한지&nbsp;여부
				&nbsp;nMinValue&nbsp;:&nbsp;0,&nbsp;
				&nbsp;nMaxValue&nbsp;:&nbsp;1,
				&nbsp;fAdjustValue&nbsp;:&nbsp;null,(Function)&nbsp;값을&nbsp;조절하기&nbsp;위한&nbsp;함수
				&nbsp;bActivateOnload&nbsp;:&nbsp;true&nbsp;//(Boolean)&nbsp;컴포넌트&nbsp;로드시&nbsp;activate&nbsp;여부
			}).attach({
				beforeChange&nbsp;:&nbsp;function(oCustomEvent){
					//Thumb이&nbsp;움직이기&nbsp;전에&nbsp;발생
					//oCustomEvent.stop()을&nbsp;실행하면&nbsp;change&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단된다.
				},
				change&nbsp;:&nbsp;function(oCustomEvent){
					//Thumb을&nbsp;Drop한&nbsp;이후&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	nIndex&nbsp;:&nbsp;(Number)
					//	nPos&nbsp;:&nbsp;(Number)
					//	nValue&nbsp;:&nbsp;(Number)
					//}
				}
			});
	**/
	
	$init&nbsp;:&nbsp;function(el,&nbsp;oOptions)&nbsp;{
		this.option({
			sClassPrefix&nbsp;:&nbsp;&#39;slider-&#39;,
			bVertical&nbsp;:&nbsp;false,
			bJump&nbsp;:&nbsp;true,
			bDragOnTrack&nbsp;:&nbsp;true,
			fAdjustValue&nbsp;:&nbsp;null,
			nMinValue&nbsp;:&nbsp;0,
			nMaxValue&nbsp;:&nbsp;1,
			bActivateOnload&nbsp;:&nbsp;true
		});
		this.option(oOptions&nbsp;||&nbsp;{});
		
		if&nbsp;(!this.option(&#39;bVertical&#39;))&nbsp;{
			this._htSwap&nbsp;=&nbsp;{
				y&nbsp;:&nbsp;&#39;nY&#39;,
				x&nbsp;:&nbsp;&#39;nX&#39;,
				clientX&nbsp;:&nbsp;&#39;clientX&#39;,
				pageX&nbsp;:&nbsp;&#39;pageX&#39;,
				offsetWidth&nbsp;:&nbsp;&#39;offsetWidth&#39;,
				left&nbsp;:&nbsp;&#39;left&#39;
			};
		}&nbsp;else&nbsp;{
			this._htSwap&nbsp;=&nbsp;{
				y&nbsp;:&nbsp;&#39;nX&#39;,
				x&nbsp;:&nbsp;&#39;nY&#39;,
				clientX&nbsp;:&nbsp;&#39;clientY&#39;,
				pageX&nbsp;:&nbsp;&#39;pageY&#39;,
				offsetWidth&nbsp;:&nbsp;&#39;offsetHeight&#39;,
				left&nbsp;:&nbsp;&#39;top&#39;
			};
		}
		
		//&nbsp;Thumbs&nbsp;들과&nbsp;각각의&nbsp;값을&nbsp;저장할&nbsp;공간&nbsp;만들기
		this._elTrack&nbsp;=&nbsp;jindo.$(el);
		this._aThumbs&nbsp;=&nbsp;jindo.$$(&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassPrefix&#39;)&nbsp;+&nbsp;&#39;thumb&#39;,&nbsp;this._elTrack);
		this._sRand&nbsp;=&nbsp;&#39;S&#39;&nbsp;+&nbsp;parseInt(Math.random()&nbsp;*&nbsp;100000000,&nbsp;10);
		jindo.$ElementList(this._aThumbs).addClass(this._sRand);

		this._aPoses&nbsp;=&nbsp;this.positions();
		this._onTrackMouseDownFn&nbsp;=&nbsp;jindo.$Fn(this._onTrackMouseDown,&nbsp;this);
		this._initDragArea();
		
		if&nbsp;(this.option(&quot;bActivateOnload&quot;)){
			this.activate();		
		}
	},
	
	/**
		Track&nbsp;엘리먼트를&nbsp;구한다.
		
		@method&nbsp;getTrack
		@return&nbsp;{HTMLElement}&nbsp;
	**/
	getTrack&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elTrack;
	},
	
	/**
		n번째&nbsp;Thumb&nbsp;엘리먼트를&nbsp;구한다.
		
		@method&nbsp;getThumb
		@param&nbsp;{Number}&nbsp;nIndex&nbsp;몇&nbsp;번째&nbsp;인지
		@return&nbsp;{HTMLElement}&nbsp;
	**/
	getThumb&nbsp;:&nbsp;function(nIndex)&nbsp;{
		return&nbsp;this._aThumbs[nIndex];
	},
	
	_initDragArea&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;self&nbsp;=&nbsp;this;
		var&nbsp;htSwap&nbsp;=&nbsp;this._htSwap;
		
		//&nbsp;컴포넌트&nbsp;내부에서&nbsp;사용하는&nbsp;다른&nbsp;컴포넌트&nbsp;초기화
		this._oDragArea&nbsp;=&nbsp;new&nbsp;jindo.DragArea(this._elTrack,&nbsp;{&nbsp;
			sClassName&nbsp;:&nbsp;this._sRand,&nbsp;
			bFlowOut&nbsp;:&nbsp;false&nbsp;
		}).attach({
			beforeDrag&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
				var&nbsp;nIndex&nbsp;=&nbsp;self._getThumbIndex(oCustomEvent.elHandle);
				var&nbsp;htParam&nbsp;=&nbsp;{&nbsp;
					nIndex&nbsp;:&nbsp;nIndex,
					nPos&nbsp;:&nbsp;oCustomEvent[htSwap.x],
					bJump&nbsp;:&nbsp;false
				};
				
				/**
					Thumb이&nbsp;움직이기&nbsp;전에&nbsp;발생
					
					@event&nbsp;beforeChange
					@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
					@param&nbsp;{Function}&nbsp;stop&nbsp;수행시&nbsp;값이&nbsp;바뀌지&nbsp;않으며,&nbsp;change&nbsp;이벤트가&nbsp;발생하지&nbsp;않고&nbsp;중단된다.
					@example
						//&nbsp;Thumb이&nbsp;움직이기&nbsp;전에&nbsp;발생&nbsp;될&nbsp;함수&nbsp;구현.
						oSlider.attach(&quot;beforeChange&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
				**/
				if&nbsp;(!self.fireEvent(&#39;beforeChange&#39;,&nbsp;htParam))&nbsp;{
					oCustomEvent.stop();
					return&nbsp;false;
				}
				
				oCustomEvent[htSwap.x]&nbsp;=&nbsp;self._getAdjustedPos(nIndex,&nbsp;htParam.nPos);
				oCustomEvent[htSwap.y]&nbsp;=&nbsp;null;
			},
			drag&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
				var&nbsp;nIndex&nbsp;=&nbsp;self._getThumbIndex(oCustomEvent.elHandle);
				var&nbsp;nPos&nbsp;=&nbsp;oCustomEvent[htSwap.x];
				if&nbsp;(nPos&nbsp;!=&nbsp;self._aPoses[nIndex])&nbsp;{
					self._aPoses[nIndex]&nbsp;=&nbsp;nPos;
					self._fireChangeEvent(nIndex);
				}
			}
		});
	},
	
	/**
		적용된&nbsp;DragArea&nbsp;객체를&nbsp;가져온다.
		
		@method&nbsp;getDragArea
		@return&nbsp;{jindo.DragArea}
	**/
	getDragArea&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oDragArea;&nbsp;
	},
	
	_fireChangeEvent&nbsp;:&nbsp;function(nIndex)&nbsp;{
		var&nbsp;nPos&nbsp;=&nbsp;this._getPosition(nIndex);
		/**
			Thumb을&nbsp;Drop한&nbsp;이후&nbsp;발생
			
			@event&nbsp;change
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Number}&nbsp;nIndex&nbsp;위치&nbsp;값을&nbsp;가져올&nbsp;Thumb의&nbsp;index&nbsp;(생략시&nbsp;모든&nbsp;Thumb의&nbsp;위치&nbsp;값&nbsp;배열을&nbsp;리턴)
			@param&nbsp;{Number}&nbsp;nPos&nbsp;설정할&nbsp;위치&nbsp;값(pixel단위)
			@param&nbsp;{Number}&nbsp;nValue&nbsp;drop&nbsp;이후의&nbsp;슬라이더&nbsp;값
			@example
				//&nbsp;Thumb을&nbsp;Drop한&nbsp;이후&nbsp;발생&nbsp;단계에&nbsp;실행&nbsp;될&nbsp;함수&nbsp;구현.
				oSlider.attach(&quot;change&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&#39;change&#39;,&nbsp;{
			nIndex&nbsp;:&nbsp;nIndex,
			nPos&nbsp;:&nbsp;nPos,
			nValue&nbsp;:&nbsp;this._getValue(nIndex,&nbsp;nPos)
		});
	},

	/**
		컴포넌트를&nbsp;활성화시킨다.
	**/
	_onActivate&nbsp;:&nbsp;function()&nbsp;{
		this.getDragArea().activate();
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;jindo.$Element(this._elTrack).preventTapHighlight(true);
		this._onTrackMouseDownFn.attach(this._elTrack,&nbsp;&#39;mousedown&#39;);
	},
	
	/**
		컴포넌트를&nbsp;비활성화시킨다.
	**/
	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		this.getDragArea().deactivate();
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;jindo.$Element(this._elTrack).preventTapHighlight(false);
		this._onTrackMouseDownFn.detach(this._elTrack,&nbsp;&#39;mousedown&#39;);
	},
	
	_onTrackMouseDown&nbsp;:&nbsp;function(we)&nbsp;{
		if&nbsp;(!this.option(&#39;bJump&#39;))&nbsp;{
			return;
		}
		
		we.stop(jindo.$Event.CANCEL_DEFAULT);
		var&nbsp;nIndex&nbsp;=&nbsp;0;
		var&nbsp;htSwap&nbsp;=&nbsp;this._htSwap;
		var&nbsp;el&nbsp;=&nbsp;we.element;
		var&nbsp;sClass&nbsp;=&nbsp;&#39;.&#39;&nbsp;+&nbsp;this.option(&#39;sClassPrefix&#39;)&nbsp;+&nbsp;&#39;thumb&#39;;
		var&nbsp;bThumb&nbsp;=&nbsp;jindo.$$.test(el,&nbsp;sClass)&nbsp;||&nbsp;jindo.$$.getSingle(&#39;!&nbsp;&#39;&nbsp;+&nbsp;sClass,&nbsp;el);
		if&nbsp;(bThumb)&nbsp;{
			return;
		}
		
		var&nbsp;nPos&nbsp;=&nbsp;we.pos()[htSwap.pageX];&nbsp;//&nbsp;클릭한&nbsp;위치
		nPos&nbsp;-=&nbsp;jindo.$Element(this._elTrack).offset()[htSwap.left];
		
		var&nbsp;nMaxDistance&nbsp;=&nbsp;9999999;
		
		//&nbsp;가장&nbsp;가까운&nbsp;Thumb&nbsp;찾기
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;oThumb;&nbsp;(oThumb&nbsp;=&nbsp;this._aThumbs[i]);&nbsp;i++)&nbsp;{
			var&nbsp;nThumbPos&nbsp;=&nbsp;parseInt(jindo.$Element(oThumb).css(htSwap.left),&nbsp;10)&nbsp;||&nbsp;0;
			nThumbPos&nbsp;+=&nbsp;parseInt(oThumb[htSwap.offsetWidth]&nbsp;/&nbsp;2,&nbsp;10);
			
			var&nbsp;nDistance&nbsp;&nbsp;=&nbsp;Math.abs(nPos&nbsp;-&nbsp;nThumbPos);
			
			if&nbsp;(nDistance&nbsp;&lt;&nbsp;nMaxDistance)&nbsp;{
				nMaxDistance&nbsp;=&nbsp;nDistance;
				nIndex&nbsp;=&nbsp;i;
			}
		}

		nPos&nbsp;-=&nbsp;parseInt(this._aThumbs[nIndex][htSwap.offsetWidth]&nbsp;/&nbsp;2,&nbsp;10);
		this.positions(nIndex,&nbsp;nPos);
		
		if&nbsp;(this.option(&quot;bDragOnTrack&quot;))&nbsp;{
			this.getDragArea().startDragging(this._aThumbs[nIndex]);
		}
	},
	
	_getTrackInfo&nbsp;:&nbsp;function(nIndex)&nbsp;{
		var&nbsp;htSwap&nbsp;=&nbsp;this._htSwap;
		var&nbsp;oThumb&nbsp;=&nbsp;this._aThumbs[nIndex];
		var&nbsp;nThumbSize&nbsp;=&nbsp;oThumb[htSwap.offsetWidth];
		var&nbsp;nTrackSize&nbsp;=&nbsp;this._elTrack[htSwap.offsetWidth];
		var&nbsp;nMaxPos&nbsp;=&nbsp;nTrackSize&nbsp;-&nbsp;nThumbSize;
		var&nbsp;nMax&nbsp;=&nbsp;this.option(&#39;nMaxValue&#39;);
		var&nbsp;nMin&nbsp;=&nbsp;this.option(&#39;nMinValue&#39;);
		
		return&nbsp;{
			maxPos&nbsp;:&nbsp;nMaxPos,
			max&nbsp;:&nbsp;nMax,
			min&nbsp;:&nbsp;nMin
		};
	},
	
	/**
		옵션의&nbsp;fAdjustValue가&nbsp;적용된&nbsp;value를&nbsp;구한다.
		@param&nbsp;{Object}&nbsp;nIndex
		@param&nbsp;{Object}&nbsp;nPos
		@ignore
	**/
	_getValue&nbsp;:&nbsp;function(nIndex,&nbsp;nPos)&nbsp;{
		if&nbsp;(typeof&nbsp;nPos&nbsp;==&nbsp;&#39;undefined&#39;)&nbsp;{
			nPos&nbsp;=&nbsp;this._getPosition(nIndex);
		}

		var&nbsp;oInfo&nbsp;=&nbsp;this._getTrackInfo(nIndex);
		var&nbsp;maxPos&nbsp;=&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(oInfo.maxPos&nbsp;!==&nbsp;0&nbsp;){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maxPos&nbsp;=&nbsp;nPos&nbsp;*&nbsp;(oInfo.max&nbsp;-&nbsp;oInfo.min)&nbsp;/&nbsp;oInfo.maxPos;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
		//&nbsp;var&nbsp;nValue&nbsp;=&nbsp;Math.min(Math.max(nPos&nbsp;*&nbsp;(oInfo.max&nbsp;-&nbsp;oInfo.min)&nbsp;/&nbsp;oInfo.maxPos&nbsp;+&nbsp;oInfo.min,&nbsp;oInfo.min),&nbsp;oInfo.max);
		var&nbsp;nValue&nbsp;=&nbsp;maxPos&nbsp;+&nbsp;oInfo.min;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nValue&nbsp;=&nbsp;Math.min(Math.max(nValue,&nbsp;Math.min(oInfo.min,&nbsp;oInfo.max)),&nbsp;Math.max(oInfo.min,&nbsp;oInfo.max));

		var&nbsp;fAdjust&nbsp;=&nbsp;this.option(&#39;fAdjustValue&#39;);
		if&nbsp;(fAdjust)&nbsp;{
			nValue&nbsp;=&nbsp;fAdjust.call(this,&nbsp;nValue);
		}
		
		return&nbsp;nValue;
	},
	
	/**
		옵션의&nbsp;fAdjustValue가&nbsp;적용된&nbsp;포지션을&nbsp;구한다.
		@param&nbsp;{Object}&nbsp;nIndex
		@param&nbsp;{Object}&nbsp;nPos
		@ignore
	**/
	_getAdjustedPos&nbsp;:&nbsp;function(nIndex,&nbsp;nPos)&nbsp;{
		var&nbsp;nAdjustedPos&nbsp;=&nbsp;nPos;
		var&nbsp;oInfo&nbsp;=&nbsp;this._getTrackInfo(nIndex);
		
		var&nbsp;fAdjust&nbsp;=&nbsp;this.option(&#39;fAdjustValue&#39;);
		if&nbsp;(fAdjust)&nbsp;{
			var&nbsp;nValue&nbsp;=&nbsp;Math.min(Math.max(nAdjustedPos&nbsp;*&nbsp;(oInfo.max&nbsp;-&nbsp;oInfo.min)&nbsp;/&nbsp;oInfo.maxPos&nbsp;+&nbsp;oInfo.min,&nbsp;oInfo.min),&nbsp;oInfo.max);
			var&nbsp;nAfterValue&nbsp;=&nbsp;fAdjust.call(this,&nbsp;nValue);
			
			if&nbsp;(nValue&nbsp;!=&nbsp;nAfterValue)&nbsp;{
				nAdjustedPos&nbsp;=&nbsp;oInfo.maxPos&nbsp;*&nbsp;(nAfterValue&nbsp;-&nbsp;oInfo.min)&nbsp;/&nbsp;(oInfo.max&nbsp;-&nbsp;oInfo.min);
			}
		}
		
		nAdjustedPos&nbsp;=&nbsp;Math.max(nAdjustedPos,&nbsp;0);
		nAdjustedPos&nbsp;=&nbsp;Math.min(nAdjustedPos,&nbsp;oInfo.maxPos);
		
		return&nbsp;nAdjustedPos;		
	},
	
	_getThumbIndex&nbsp;:&nbsp;function(oThumb)&nbsp;{
		for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;len&nbsp;=&nbsp;this._aThumbs.length;&nbsp;i&nbsp;&lt;&nbsp;len;&nbsp;i++)&nbsp;{
			if&nbsp;(this._aThumbs[i]&nbsp;==&nbsp;oThumb)&nbsp;{
				return&nbsp;i;
			}
		}
			
		return&nbsp;-1;
	},
	
	_getPosition&nbsp;:&nbsp;function(nIndex)&nbsp;{
		var&nbsp;sPos&nbsp;=&nbsp;jindo.$Element(this._aThumbs[nIndex]).css(this._htSwap.left);
		return&nbsp;(sPos&nbsp;==&nbsp;&quot;auto&quot;)&nbsp;?&nbsp;0&nbsp;:&nbsp;parseInt(sPos,&nbsp;10);
	},
	
	_setPosition&nbsp;:&nbsp;function(nIndex,&nbsp;nPos)&nbsp;{
		this._aPoses[nIndex]&nbsp;=&nbsp;nPos;
		jindo.$Element(this._aThumbs[nIndex]).css(this._htSwap.left,&nbsp;nPos&nbsp;+&nbsp;&#39;px&#39;);
	},
	
	/**
		pixel단위로&nbsp;Thumb의&nbsp;위치&nbsp;값을&nbsp;가져온다.
		
		@method&nbsp;positions
		@param&nbsp;{Number}&nbsp;[nIndex]&nbsp;위치&nbsp;값을&nbsp;가져올&nbsp;Thumb의&nbsp;index&nbsp;(생략시&nbsp;모든&nbsp;Thumb의&nbsp;위치&nbsp;값&nbsp;배열을&nbsp;리턴)
		@return&nbsp;{Number&nbsp;|&nbsp;Array}
		@example&nbsp;
			oSlider.positions(0);
			oSlider.positions();
	**/
	/**
		pixel단위로&nbsp;Thumb의&nbsp;위치&nbsp;값을&nbsp;설정한다.
		
		@method&nbsp;positions
		@param&nbsp;{Number}&nbsp;nIndex&nbsp;위치&nbsp;값을&nbsp;설정할&nbsp;Thumb의&nbsp;index
		@param&nbsp;{Number}&nbsp;nPos&nbsp;설정할&nbsp;위치&nbsp;값(pixel단위)
		@param&nbsp;{Boolean}&nbsp;bFireEvent&nbsp;커스텀&nbsp;이벤트를&nbsp;발생할지의&nbsp;여부
		@return&nbsp;{this}&nbsp;인스턴스&nbsp;자신
		@example&nbsp;
			oSlider.positions(0,&nbsp;100);
	**/
	positions&nbsp;:&nbsp;function(nIndex,&nbsp;nPos,&nbsp;bFireEvent)&nbsp;{
		if&nbsp;(typeof&nbsp;bFireEvent&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
			bFireEvent&nbsp;=&nbsp;true;	
		}

		switch&nbsp;(arguments.length)&nbsp;{
			case&nbsp;0:
				var&nbsp;aPoses&nbsp;=&nbsp;[];
				jindo.$A(this._aThumbs).forEach(function(el,&nbsp;i){
					aPoses[i]&nbsp;=&nbsp;this._getPosition(i);
				},&nbsp;this);
				return&nbsp;aPoses;
	
			case&nbsp;1:
				return&nbsp;this._getPosition(nIndex);
				
			default:
				if&nbsp;(bFireEvent)&nbsp;{
					var&nbsp;htParam&nbsp;=&nbsp;{&nbsp;
						nIndex&nbsp;:&nbsp;nIndex,
						nPos&nbsp;:&nbsp;nPos,
						bJump&nbsp;:&nbsp;true
					};
					if&nbsp;(this.fireEvent(&#39;beforeChange&#39;,&nbsp;htParam))&nbsp;{
						var&nbsp;nAfterPos&nbsp;=&nbsp;this._getAdjustedPos(nIndex,&nbsp;htParam.nPos);
						var&nbsp;bChanged&nbsp;=&nbsp;(nAfterPos&nbsp;!=&nbsp;this._aPoses[nIndex]);
	
						this._setPosition(nIndex,&nbsp;nAfterPos);
						if&nbsp;(bChanged)&nbsp;{
							this._fireChangeEvent(nIndex);
						}
					}
				&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;
				}
				this._setPosition(nIndex,&nbsp;this._getAdjustedPos(nIndex,&nbsp;nPos));
			&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;
		}&nbsp;
	},
	
	/**
		옵션으로&nbsp;설정한&nbsp;nMinValue,&nbsp;nMaxValue에&nbsp;대한&nbsp;상대&nbsp;값으로&nbsp;해당&nbsp;Thumb의&nbsp;위치&nbsp;값을&nbsp;가져온다.
		
		@method&nbsp;values
		@param&nbsp;{Number}&nbsp;[nIndex]&nbsp;Value를&nbsp;가져올&nbsp;Thumb의&nbsp;index&nbsp;(생략시&nbsp;모든&nbsp;Thumb의&nbsp;위치&nbsp;값&nbsp;배열을&nbsp;리턴)
		@return&nbsp;{Number&nbsp;|&nbsp;Array}
		@example&nbsp;
			oSlider.values(0);
			oSlider.values();
	**/
	/**
		옵션으로&nbsp;설정한&nbsp;nMinValue,&nbsp;nMaxValue에&nbsp;대한&nbsp;상대&nbsp;값으로&nbsp;해당&nbsp;Thumb의&nbsp;위치&nbsp;값을&nbsp;설정한다.
		
		@method&nbsp;values
		@param&nbsp;{Number}&nbsp;nIndex&nbsp;Value를&nbsp;설정할&nbsp;Thumb의&nbsp;index
		@param&nbsp;{Number}&nbsp;nValue&nbsp;설정할&nbsp;위치&nbsp;값
		@param&nbsp;{Boolean}&nbsp;bFireEvent&nbsp;커스텀&nbsp;이벤트를&nbsp;발생할지의&nbsp;여부
		@return&nbsp;{this}&nbsp;인스턴스&nbsp;자신
		@example&nbsp;
			oSlider.values(0,&nbsp;0.5);
	**/
	values&nbsp;:&nbsp;function(nIndex,&nbsp;nValue,&nbsp;bFireEvent)&nbsp;{
		if&nbsp;(typeof&nbsp;bFireEvent&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
			bFireEvent&nbsp;=&nbsp;true;	
		}
		
		switch&nbsp;(arguments.length)&nbsp;{
			case&nbsp;0:
				var&nbsp;aValues&nbsp;=&nbsp;[];
				for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;len&nbsp;=&nbsp;this._aThumbs.length;&nbsp;i&nbsp;&lt;&nbsp;len;&nbsp;i++)&nbsp;{
					aValues[i]&nbsp;=&nbsp;this._getValue(i);
				}
				return&nbsp;aValues;
				
			case&nbsp;1:
				return&nbsp;this._getValue(nIndex,&nbsp;this.positions(nIndex));&nbsp;//수정
	
			default:
				var&nbsp;oInfo&nbsp;=&nbsp;this._getTrackInfo(nIndex);
				this.positions(nIndex,&nbsp;((nValue&nbsp;-&nbsp;oInfo.min)&nbsp;*&nbsp;oInfo.maxPos&nbsp;/&nbsp;(oInfo.max&nbsp;-&nbsp;oInfo.min))&nbsp;||&nbsp;0,&nbsp;bFireEvent);
				return&nbsp;this;
		}
	}
}).extend(jindo.UIComponent);</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>